<template>
    <div class='all'>
      <div class="h">
        <div class="h-box">
         <Header/>
        </div>
     </div>
      <div class="all-box">
      <!-- 头部 -->
        <div class='header'>
            <div class='header-banner'>
                <img src="../assets/ld/img/banner.png" class='back'>
                <div class='logo'>
                    <p class='shop'>逛逛商铺</p>
                    <p>寻找你想要的商铺</p>
                </div>
                <div class='wow'>
                    <button><router-link class='want' to="/applyShop">我要开店</router-link></button>
                </div>
            </div>
        </div>
        <!-- 搜索店铺 -->
        <div class="con">
          <div class='con-wrap'>
            <div class="from-wrap">
              <form action="">
                <el-input v-model="input" placeholder="请输入店铺名" class='slot'></el-input>
                <el-button type="primary">
                  <!-- 查询 -->
                  <router-link :to="{
                    path:'/search',
                    query:{
                      content:input
                    }
                  }">查询</router-link>
                  </el-button>
              </form>
            </div>
          </div>
        </div>
        <!-- 轮播图 -->
        <Slideshow></Slideshow>
        <!-- 店铺 -->
       <Center></Center>
       <!-- 底部联系我们 -->
       <div class="part">
         <div class="contact">
          <div class="com-title">
             <p class="com-wow">联系客服了解更多内容</p>
          </div>
          <div class="com-main">
            <div class="container">
              <div class="from-com">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                   <p class="row">现在预约店铺 立马为你提供服务</p>
                    <el-form-item label="预约时间" prop="time" class='tip'>
                      <el-input v-model="ruleForm.time"></el-input>
                    </el-form-item>
                    <el-form-item label="预约方式" prop="region" class='tip'>
                      <el-select v-model="ruleForm.region" placeholder="请选择预约方式">
                        <el-option label="到店服务" value="到店服务"></el-option>
                        <el-option label="上门服务" value="上门服务"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="商铺id" prop="shopUser" class='tip' style="display:none">
                      <el-input type="text" v-model="ruleForm.shopUser"></el-input>
                    </el-form-item>
                    <el-form-item label="用户id" prop="userId" class='tip' style="display:none">
                      <el-input type="text" v-model="ruleForm.userId"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="submitForm(ruleForm)">立即预约</el-button>
                       <!-- <el-button type="primary" @click="submitForm()">立即预约</el-button> -->
                    </el-form-item>
                    <div class="text-grey">
                      <div>简单三步便可预约</div>
                      <div>确认店铺类型--开通定位--开启你的预约</div>
                    </div>
                </el-form>
                 <div class="bet">
                   <div class="l"><span>400-800-8888</span></div>
                   <div class="r">
                     周一至周五 9:00-22:00<br>
                     周六至周日 9:00-18:00
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
       <Footer/>
      </div>
    </div>
</template>
<script>
import Header from '../components/ld/header.vue'
import Center from '../components/ld/M-center.vue'
import Slideshow from '../components/ld/M-slideshow.vue'
import Footer from '../components/ld/footer.vue'
import cookie from '../cookie/index';
import jwtDecode from 'jwt-decode'

import {Appointment} from '../../api/commonReq/front/index/data'
  export default {
    name: 'Index',
    props: {
      msg: String
    },
    components:{
      Header,
      Center,
      Slideshow,
      Footer
    },
    data() {
      return {
        input:'',
        shops:[
          {img:'',name:'美折促销',appe:'真不错'},
          {img:'',name:'超级店长',appe:'真不错'},
          {img:'',name:'优惠券',appe:'真不错'},
          {img:'',name:'爱用交易',appe:'真不错'},
        ],
        stores:[
          {title:'6.欢乐逛打折',desc:'促销'},
          {title:'7.爱用商品',desc:'促销'},
          {title:'8.快递助手',desc:'促销'},
          {title:'9.打包配',desc:'促销'},
        ],
        // 咨询的表单
        ruleForm: {
          time: '',
          region: '',
          shopUser:2,
          userId: this.userId,
          data:null
        },
        // 用户id
        userId:'',
        rules: {
          time: [
            { required: true, message: '请输入预约时间', trigger: 'blur' },
            { message: '请输入具体时间段(2022-2-25-18:00)', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择预约方式', trigger: 'change' }
          ],
          shopUser: [
            { required: true, message: '请输入店铺id', trigger: 'blur' }
          ],
          userId: [
            { required: true, message: '请输入用户id', trigger: 'blur' }
          ]
        }
      }
    },
     mounted(){
        console.log(this.$store.state.store);
        this.data=jwtDecode(cookie.getToken())
        this.userId = jwtDecode(cookie.getToken()).userId
    },
    methods: {
      submitForm(formName) {
        console.log(formName);
        console.log(this.ruleForm);
        Appointment({appointTimeslot:this.ruleForm.time,
                     appointWay:this.ruleForm.region,
                     shopId:2,
                     userId:this.ruleForm.userId
        }).then(data=>{
          console.log(171171717);
          console.log(data.data.data);
          if(data.data.code === 199){
            this.$message({
                message:data.data.message,
                type:'warning',
                center:true
            })
          }else{
            this.$message({
                message:data.data.message,
                type:'success',
            })
            this.ruleForm.time='';
            this.ruleForm.region='';
            // this.ruleForm.shopUser=''; 
          }
        })
        .catch(err=>{
          console.log(err);
        })
        // this.$http({
        //   url:'/shops/user/appoint/addAppoint',
        //   method:'post',
        //   headers:{
        //     'Authorization':cookie.getToken()
        //   },
        //   params:{
        //     appointTimeslot:this.ruleForm.time,
        //     appointWay:this.ruleForm.region,
        //     shopId:2,
        //     userId:this.ruleForm.userId
        //   }
        // })
        // .then(data => {
        //   if(data.data.code === 199){
        //     this.$message({
        //         message:data.data.message,
        //         type:'warning',
        //         center:true
        //     })
        //   }else{
        //     this.$message({
        //         message:data.data.message,
        //         type:'success',
        //     })
        //     this.ruleForm.time='';
        //     this.ruleForm.region='';
        //     // this.ruleForm.shopUser=''; 
        //   }
        // })
        // .catch(error => {
        //   console.log(error);
        // })
      },
    },
    
  }
</script>
<style scoped>

.h{
  width: 100%;
  background-color: rgb(248,248,248);
 
}
 .h-box{
      width: 1200px;
      margin: 0 auto;
  }
  .all{
     width: 100%;
     position: absolute;
  }
  .all-box{
    width: 1263px;
    margin: 0 auto;
  }
  /* 头部· */
  .header{
    width: 100%;
  }
  .header-box{
    width: 100%;
    background-color: rgb(248,248,248);
  }
  .header-banner{
    margin: 0 auto;
    height: 420px;
    position: relative;
  }
  .back{
    width: 100%;
    height: 100%;
  } 
  .logo{
      position: absolute;
      left: 10%;
      top: 40%;
  }
  .shop{
    color:#666;
    margin-bottom: 15px;
  }
  .logo p{
    letter-spacing: 6px;
    font-size: 36px;
    font-weight: bolder;
  }
  .wow{
    position: absolute;
    left: 13%;
    top: 70%;
  }
  .wow button{
    color: white;
    font-size: 20px;
    padding: 5px 50px;
    background-color: #007bff;
    border: 1px solid #007bff;
    outline: none;
    cursor: pointer;
  }
  .want{
    text-decoration: none;
    color: white;
  }
  /* 搜索店铺 */
  .con{
    /* margin: 0 auto; */
    width: 100%;
    background-color:#fafbfd ;
  }
  .con-wrap{
    margin: 0 auto;
    padding-right: 15px;
    padding-left: 15px;
  }
  .from-wrap{
    text-align: center;
    margin: 0 auto;
    padding: 40px 0;
  }
  .slot{
    width: 30%;
    margin-right: 20px;
  }

  /* 底部的联系我们 */
  .part{
    width: 100%;
    text-align: center;
  }
  .contact{
    margin: 0 auto;
  }
  .com-title{
    width: 100%;
  }
  .com-wow{
    text-align: center;
    font-size: 34px;
    font-family: "FZLTZHJW";
  }
  /* 主要表单的内容 */
  .com-main{
    height: 500px;
    margin-top: 110px;
    background-image: url('../assets/ld/img/bg-contact.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .container{
    display: flex;
    position: relative;
  }
  .from-com{
      position:absolute;
      right: 60px;
      width: 425px;
      background: #fff;
      border-radius: 5px;
      border: 1px solid #ddd;
      -webkit-transform: translateY(-40px);
      -ms-transform: translateY(-40px);
      transform: translateY(-40px);
  }
  .demo-ruleForm{
        padding: 30px 30px 20px;
  }
  .row{
      color: #333;
      font-size: 25px;
      font-weight: bold;
      margin-bottom: 20px
  }
  .tip{
    margin-bottom: 20px;
  }
  .text-grey{
    color: grey;
  }
  .text-grey div{
    margin-bottom:8px;
  }
  .bet{
      display: flex;
      align-items: center;
      background-color: #f5f5f5;
      padding: 10px;
      font-size: 12px;
      color: #999;
      border-top: 1px solid #ddd;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
  }
</style>

